<template>
    <div class="con">
        <headNav title="邀请合伙人" :isHome="false"></headNav>
        <div class="inviList" v-loadmore='loadmore'>
           <ul>
               <li v-for="(item, index) in list" :key="index">
                   <div class="teamName">
                       <p class="nameP"><img src="../../assets/img/team/team.png" alt="">{{item.teamName}}</p>
                       <div v-for="p in item.partners" class="nameText">{{p}}</div>
                      
                   </div>
                   <div class="teamPen">
                       <div class="progress">
                          
                           <myProgress :percentage="item | percen"></myProgress>
                           <!-- {{item | percen}} -->
                       </div>
                       <div class="personNum">{{item.currentNum}}/{{item.memberNum}}人</div>
                       <div v-if="item.currentNum >= item.memberNum" class="teamType">团队已满</div>
                       <div v-else class="teamType2" :teamId="item.teamId" @click="invite(item)">发起邀请</div>
                   </div>
               </li>
           </ul>

            <div class="addTeam" @click="createTeam">
                <img src="../../assets/img/team/add.png" alt="">
                <p>新增团队</p> 
            </div>

            <van-loading v-if="isMore"  size="24px" vertical class="loading">加载中...</van-loading>
            <van-loading v-else  size="0px" vertical class="loading">没有更多</van-loading>
        </div>
       
        <bottomNav :index="4"></bottomNav>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav.vue'
import bottomNav from '@/components/bottomNav/bottomNav.vue'
import {createTeam, pageMyTeams} from '@/api/teamClockApi'
import myProgress from './myProgress'
export default {
  name: 'invitation',
  components: {
    headNav,
    bottomNav,
    myProgress
  },
  data () {
      return {
          list: [],
          limit: 10,
          page: 1,
          isMore: true
      }
  },
  filters: {
      percen(val) {
          return (val.currentNum / val.memberNum) * 100
      }
  },
  methods: {
      async pageMyTeams(page){
          this.page = page
          let res = await pageMyTeams({
              limit: this.limit,
              page: this.page
          })
          let records
          if (res.data) {
              records = res.data.records
          } else {
              records = []
          }
          
          this.list = this.list.concat(records)

          if (records.length < this.limit) {
              this.isMore = false
          }
      },
      loadmore () {
          console.log('loadmore...')
          if (!this.isMore) {
              return
          }
          this.pageMyTeams(this.page + 1)
      },
      async createTeam () {
          let emptyCount = 0
          for (let item of this.list) {
              if (item.currentNum == 0) {
                  emptyCount ++
              }
          }
          if (emptyCount >=5) {
               this.$toast.fail('空团队不能超过5个')
              return
          }

          let res = await createTeam()
          res = res.data
          res.partners = []
          this.list.push(res)
      },
      invite (item) {
        
          this.$store.state.share.agentType = 1
          this.$store.state.share.teamName = item.teamName
          this.$store.state.share.teamId = item.teamId
          this.$store.commit('share/setIsShare', true)
          this.$router.push('share')
      }
  },
  async mounted () {
      await this.pageMyTeams(1)
      if (this.list.length == 0) {
          await this.createTeam()
      }
  }
}

</script>
<style scoped>
.con{
    height: 100%;overflow: hidden;
}
.inviList{
    padding: 1px 0; height: calc(100% - 1.98rem); overflow-y: scroll;
}
.inviList li{
   width: 6.12rem;
    height: 2.00rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.02rem 0.16rem 0rem rgba(0, 0, 0, 0.05);
    border-radius: 0.15rem;
    margin: 0 auto;
    margin-top: 0.3rem;
    padding: 0.3rem;
}
.teamName{
  float: left;
}
.nameP{
   color: #000;
   font-size: 0.32rem;
}
.nameP img{
    width: 0.34rem;
    height: 0.31rem;
    float: left;
    margin-top: 0.08rem;
    margin-right: 0.08rem;
}
.nameText{
    font-size: 0.28rem;
    color: #666666;
    margin-top: 0.15rem;
}
.teamPen{
    float: right;
    width: 2rem;
}
.progress{
    margin-top: 0.44rem;
}
.personNum{
    color: #666666;
    font-size: 0.24rem;
    text-align: center;
    margin-top: 0.26rem;
}
.teamType{
    font-size: 0.28rem;
    color: #FF352B;
    margin-top: 0.3rem;
    text-align: center;
}
.teamType2{
    width: 1.60rem;
    height: 0.60rem;
    font-size: 0.24rem;
    background: #FF8418;
    border-radius: 0.30rem;
    line-height: 0.6rem;
    text-align: center;
    margin: 0 auto;
    color: #FFFFFF;
    margin-top: 0.2rem;
    box-shadow: 0rem 0.02rem 0.16rem 0rem rgba(0, 0, 0, 0.05);
}
.addTeam{
    width: 6.72rem;
    height: 1.58rem;
    background: #FFFFFF;
    box-shadow: 0px 0.02px 0.16rem 0rem rgba(0, 0, 0, 0.05);
    border-radius: 0.15rem;
    margin: 0 auto;
    margin-top: 0.3rem;
    text-align: center;
}
.addTeam img{
   width: 0.52rem;
   height: 0.52rem;
   margin-top: 0.3rem;
}
.addTeam p{
    text-align: center;
    font-size: 0.28rem;
    margin-top: 0.1rem;
}
.loading{
    padding: 0.1rem 0;
}
</style>